<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
		<link rel="stylesheet" href="/styles.css" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Photos from Facebook</title>
        <script type="text/javascript">
            var button;
            var accessToken;
			var gotPhotos = false;
            window.fbAsyncInit = function() {
                FB.init({ appId: '338030316264567', //change the appId to your appId
                    status: true, 
                    cookie: true,
                    xfbml: true,
                    oauth: true});

               function updateButton(response) {
                    button       =   document.getElementById('fb-auth');
                    
                    if (response.authResponse) {
                        //user is already logged in and connected
                        FB.api('/me', function(info) {
                            login(response, info);
                        });
                        
                        button.onclick = function() {
                            FB.logout(function(response) {
                                logout(response);
                            });
                        };
                    } else {
                        //user is not connected to your app or logged out
                        button.innerHTML = 'Login';
                        button.onclick = function() {
                            FB.login(function(response) {
                                if (response.authResponse) {
                                    FB.api('/me', function(info) {
                                        login(response, info);
                                    });	   
                                } else {
                                    //user cancelled login or did not grant authorization
                                }
                            }, {scope:'user_photos,status_update,publish_stream,user_about_me'});  	
                        }
                    }
                }
                
                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);	
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol 
                    + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());
            
            
            function login(response, info){
                if (response.authResponse) {
                    accessToken                                    =   response.authResponse.accessToken;
                    button.innerHTML                               = 'Logout';
					//alert(accessToken); (works)
					if(!gotPhotos) {
						//getAlbumPhotos();
						getAlbums();
						gotPhotos = true;
					}
                }
            }
        
            function logout(response){
				gotPhotos = false;
            }
			
			//Get Album data
			function getAlbums(){
				FB.api('/me/albums?access_token='+accessToken,  function(response) {
					//var ul = document.getElementById('albums');
					var album_buttons_tag = document.getElementById("album_buttons");
					for (var i=0, l=response.data.length; i<l; i++){
						var albumid = response.data[i].id;
						//getPhotos(albumid);
						album_buttons_tag.innerHTML += '<a href="#" onclick="getPhotos('+albumid+')" id='+albumid+'></a></br>';
						//album_buttons_tag.innerHTML += '<img name="Album:' + albumid + '">'+albumid+'</button><br />'
						getPhotoForAlbum(albumid,response.data[i].cover_photo);
					}
					
					if(response.paging && response.paging.next) {
						var nextUrl = response.paging.next.replace('https://graph.facebook.com','');
						nextUrl = nextUrl.replace('http://graph.facebook.com','');
						getAlbumPhotosFromUrl(nextUrl);
					}
				});
			}
			
			function getAlbumsFromUrl(fromUrl){
				FB.api(fromUrl,  function(response) {
					//var ul = document.getElementById('albums');
					var album_buttons_tag = document.getElementById("album_buttons");
					for (var i=0, l=response.data.length; i<l; i++){
						var albumid = response.data[i].id;
						//getPhotos(albumid);
						album_buttons_tag.innerHTML += '<a href="#" onclick="getPhotos('+albumid+')" id='+albumid+'></a></br>';
						//album_buttons_tag.innerHTML += '<button name="Album:' + albumid + '">'+albumid+'</button><br />'
						getPhotoForAlbum(albumid,response.data[i].cover_photo);
					}
					if(response.paging && response.paging.next) {
						var nextUrl = response.paging.next.replace('https://graph.facebook.com','');
						nextUrl = nextUrl.replace('http://graph.facebook.com','');
						getAlbumPhotosNext(nextUrl);
					}
				});
			}
			
			function getPhotoForAlbum(albumid, photoid) {
				FB.api('/'+photoid+'?access_token='+accessToken,function(response){
					
					//Find the album from the links and change its html
					var album_button = document.getElementById(albumid);
					album_button.innerHTML = '<img src="'+response.images[response.images.length-3].source+'" />';
				});
			}
			
			function getPhotos(albumid) {
				
				FB.api('/'+albumid+'/photos?access_token='+accessToken,function(response){
					var photos = response.data;
					var imgs_tag = document.getElementById("images");
					//document.getElementById("photos_header").innerHTML = "Photos("+photos.length+")";
					//alert('AlbumId: ' + albumid);
					imgs_tag.innerHTML = "";
					for(var v=0;v<photos.length;v++) {
						imgs_tag.innerHTML += '<a href="/facebook?img-url=' + photos[v].source + '"><img src=' + photos[v].images[photos[v].images.length-1].source + ' /></a><br />'
					}
					
					if(response.paging && response.paging.next) {
						var nextUrl = response.paging.next.replace('https://graph.facebook.com','');
						nextUrl = nextUrl.replace('http://graph.facebook.com','');
						getPhotosFromUrl(nextUrl);
					}
				});
			}
			
			function getPhotosFromUrl(fromUrl) {
				
				FB.api(fromUrl,function(response){
					var photos = response.data;
					var imgs_tag = document.getElementById("images");
					//document.getElementById("photos_header").innerHTML = "Photos("+photos.length+")";
					//alert('AlbumId: ' + albumid);
					for(var v=0;v<photos.length;v++) {
						imgs_tag.innerHTML += '<a href="/facebook?img-url=' + photos[v].source + '"><img src=' + photos[v].images[photos[v].images.length-1].source + ' /></a><br />'
					}
					
					if(response.paging && response.paging.next) {
						var nextUrl = response.paging.next.replace('https://graph.facebook.com','');
						nextUrl = nextUrl.replace('http://graph.facebook.com','');
						getPhotosFromUrl(nextUrl);
					}
				});
			}
            
        </script>
    </head>
    <body onload='getAlbums()'>
    	<div class="content">
	    	<div class="nav_bar">
    			<ul>
    				<li><a href='/'>Upload</a></li>
    				<li class='currentPage'><a href='/facebook.html'>Facebook Pictures</a></li>
    				<li><a href='/viewimages'>Saved Images</a></li>
    				<li><a href='/viewpuzzles'>Saved Puzzles</a></li>
    			</ul>
    		</div><!-- nav_bar -->
    		<br /><br />
        	<div id="fb-root"></div>
				
			<br />
			<button id="fb-auth">Login</button>
        
			<div id="album_buttons"></div>
			<div id="images"></div>
		
        </div><!-- content -->
    </body>
</html>